<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="infoObj.photo" @click="clickipt" />
          <input type="file" v-show="false" accept="image/*" ref="ipt" @change="changePhoto" />
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="infoObj.name" @click="changeNameFn" />
      <van-dialog v-model="nameShow" title="修改用户名" show-cancel-button :beforeClose="postName">
        <van-cell-group>
          <van-field v-model="value" placeholder="请输入用户名" input-align="center" v-fofo />
        </van-cell-group>
      </van-dialog>

      <van-cell title="生日" is-link :value="infoObj.birthday" @click="ShowBirth" />
    </van-cell-group>
    <van-popup v-model="isShowBirth" position="bottom" style="height: 50%" round>
      <!-- 日期选择控件 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择出生日期"
        :min-date="minDate"
        :max-date="maxDate"
        :show-toolbar="true"
        @cancel="isShowBirth = false"
        @confirm="postBirthday"
      />
    </van-popup>
  </div>
</template>

<script>
import { setUserinfoAPI, changePhotoAPI, changeNameAPI } from '@/api/user.js'
import { mapMutations } from 'vuex'
import moment from 'moment'
import { Toast } from 'vant'

export default {
  name: 'UserEdit',
  data() {
    return {
      infoObj: {},
      nameShow: false,
      value: '',
      isShowBirth: false,
      minDate: new Date(1900, 0, 1), // 最小的可选的日期
      maxDate: new Date(), // 最大的可选日期
      currentDate: new Date() // 当前日期
    }
  },
  methods: {
    ...mapMutations(['setPhoto', 'setName']),
    ShowBirth() {
      this.isShowBirth = true
      this.currentDate = this.infoObj.birthday
    },
    clickipt() {
      this.$refs.ipt.click()
    },
    async postName(actions, done) {
      if (actions === 'confirm') {
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.value)) {
          await changeNameAPI({ name: this.value })
          this.infoObj.name = this.value
          this.setName(this.value)
          done()
        } else {
          done(false)
          Toast('名字必须是1-7位中英文数字格式！')
        }
      } else {
        done()
      }
    },
    changeNameFn() {
      this.nameShow = true
      this.value = this.infoObj.name
    },
    async changePhoto(e) {
      // e.target.files 里是目标文件对象
      // 因为 接口档案需要得是 formdata 请求头 所以需要 new一个formdata实例
      const fd = new FormData()
      if (e.target.files.length === 0) {
        return
      }
      // 然后把得到的文件对象 放到实例里转成 formdata实例 因为接口档案要photo的key
      fd.append('photo', e.target.files[0])

      const res = await changePhotoAPI(fd)

      this.infoObj.photo = res.data.data.photo
      this.setPhoto(res.data.data.photo)
    },
    async postBirthday() {
      const dateStr = moment(this.currentDate).format('YYYY-MM-DD')
      console.log(dateStr)
      const res = await changeNameAPI({ birthday: dateStr })
      this.isShowBirth = false
      console.log(res)
      this.infoObj.birthday = dateStr
    }
  },
  async created() {
    const res = await setUserinfoAPI()
    this.infoObj = res.data.data
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
